<template>
	<view class="container">
		<fu-navbar title="选择工单" bgColor="#0f68f0" color="#fff" isBackText></fu-navbar>
		<view class="search-wrap margin-b-10">
			<view class="search-box">
				<image class="search" src="../../../static/images/search-0.png" mode="widthFix"></image>
				<input placeholder="工单编号" placeholder-class="pla-ipt" class="ipt" @confirm="search" />
				<view class="btn" @click="search">搜索</view>
			</view>
		</view>
		<view class="padding-24">共3条工单</view>
		<view class="list">
			<view class="box bg-f padding-lr-24 margin-b-24" v-for="item in 3" @click="onSelect()">
				<view class="flex align-center padding-tb-32">
					<image src="../../../static/images/select.png" class="icon"></image>
					<!-- <image src="../../../static/images/select-action.png" class="icon"></image> -->
					<view class="fs-36 text-bold">wx2324354356</view>
				</view>
				<view class="border-b-c9">
					<view class="flex over-hidden fs-28 margin-b-16">
						<view class="label flex-shrink">设备：</view>
						<view class="flex-1 text-ellipsis">干式变压器</view>
					</view>
					<view class="flex over-hidden fs-28 margin-b-16">
						<view class="label flex-shrink">位置：</view>
						<view class="flex-1 text-ellipsis">干式变压器</view>
					</view>
					<view class="flex over-hidden fs-28 margin-b-16">
						<view class="label flex-shrink">故障现象：</view>
						<view class="flex-1 text-ellipsis">干式变压器</view>
					</view>
				</view>
				<view class="padding-tb-24 flex align-center justify-between fs-28 color-a">
					<view>张三</view>
					<view>2024-04-02</view>
				</view>
			</view>
		</view>
		<view class="bottom-wrap">
			<view class="bottom flex align-center justify-between fs-36">
				<view class="btn" >确认</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			
		}
	},
	onLoad() {
		
	},
	methods: {
		search() {
			
		},
		onSelect() {
			
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f3f5f8;
}
.search-wrap {
	padding: 24rpx;
	.search-box {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 8rpx;
		padding: 8rpx 0;
		.search {
			width: 42rpx;
			margin: 0 20rpx;
			flex-shrink: 0;
		}
		.ipt {
			color: #333;
			font-size: 28rpx;
			flex: 1;
		}
		.pla-ipt {
			color: #b6b6b6;
		}
		.btn {
			flex-shrink: 0;
			width: 128rpx;
			height: 66rpx;
			border-radius: 66rpx;
			background-color: #1c91ff;
			color: #fff;
			text-align: center;
			line-height: 66rpx;
			font-size: 28rpx;
			margin-right: 8rpx;
		}
	}
}
.list {
	.box {
		border-radius: 20rpx;
		.icon {
			width: 44rpx;
			height: 44rpx;
			margin-right: 24rpx;
		}
		.label {
			width: 146rpx;
			text-align: right;
		}
	}
}
.bottom-wrap {
	height: 140rpx;
	.bottom {
		padding: 16rpx 48rpx;
		position: fixed;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
		z-index: 9;
		.btn {
			width: 100%;
			height: 98rpx;
			border-radius: 12rpx;
			text-align: center;
			line-height: 98rpx;
			color: #fff;
			background-color: #0f68f0;
		}
	}
}
</style>